<template>
  <GroupPage title="服务评价汇总" group-size="small" group-title="收费员信息" content-title="服务评价信息">
    <template #group>
      <a-input-search
        v-model:value="collectorKeyword"
        class="mb-4"
        placeholder="搜索收费员名称"
        @search="handleCollectorSearch"
      />
      <SpinSkeleton v-show="tableLoading || tableData.length > 0" :loading="tableLoading">
        <a-tree
          v-if="tableData && tableData.length > 0"
          :field-names="{ title: 'tollCollector', key: 'id' }"
          :tree-data="tableData"
          :selected-keys="selectedKeys"
          show-line
          @select="selectCollector"
        />
      </SpinSkeleton>
      <SlEmpty v-show="!tableLoading && tableData.length === 0" :description="emptyText"></SlEmpty>
    </template>
    <template #content>
      <SearchForm class="mb-0 mx-7 mt-6" :select-data="selectData" @search="onSearchContent"> </SearchForm>
      <div class="flex-1 overflow-hidden mx-7">
        <SlTable
          :columns="contentColumns"
          row-key="collectorId"
          :data-source="contentData"
          :pagination="void 0"
          :loading="contentLoading"
        >
          <!-- <template #bodyCell="{ column, record }">
        
      </template> -->
        </SlTable>
      </div>
    </template>
  </GroupPage>
</template>
<script lang="ts" setup>
import { message, TableProps } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import { useI18n } from "/@/locales/useI18n";

import type {
  ServiceEvaluationItem,
  PartialServiceEvaluation,
  ServiceReportItem,
  PartialServiceReportItem,
} from "/@/api/main/statisticalReport/models";
import { Api } from "/@/api/main/statisticalReport";
import type { TollCollectorItem } from "/@/api/main/civilizedService/models";
import { Api as csApi } from "/@/api/main/civilizedService";
import { useCURD } from "/@/hooks/useCURD";
import { RequestMethodEnum } from "/@/api/req/httpEnum";

import { useEmptyText } from "/@/hooks/useEmptyText";
import { PatternKey } from "/@/utils/verify";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import { LabelSelectType } from "/@/types/components";
import type { BodyCellOptions, ExpandedRowRenderOptions } from "/@/types/antd";
import { handleDateRowRender } from "/@/utils/common";
import { EChartsOption } from "/@/components/SlChart/models";
const { t } = useI18n();
/**
 * 收费员
 */
//查询收费员
const collectorKeyword = ref("");
async function handleCollectorSearch() {
  await reloadTable({
    model: {
      noName: collectorKeyword.value,
    },
  });
}
const { tableData, tableLoading, reloadTable, searchModel } = useCURD<TollCollectorItem & { key: string }>({
  getPageUrl: csApi.tollCollectorsPage,
  pageSize: 999,
  loadOnMounted: false,
  onLoadSuccess(data) {
    if (data.length > 0) {
      selectedKeys.value = [data[0].id as number];
    } else {
      contentData.value = [];
    }
  },
});

const { emptyText, modelForEmptyText } = useEmptyText();
watch(
  searchModel,
  (v) => {
    modelForEmptyText.value = v;
  },
  { deep: true }
);
//当前所选收费员id
const selectedKeys = ref<number[]>([]);
watch(selectedKeys, (keys) => {
  const item = tableData.value.find((el) => el.id === keys[0]);
  onSearchContent({
    collector: item ? item.tollCollector : "",
  });
});
function selectCollector(keys, { node }) {
  selectedKeys.value = [node.id];
}
/**
 * 入口
 */
onMounted(async () => {
  //加载班组
  await reloadTable();
});
/**
 * 服务评价内容
 */
const contentColumns = ref<TableProps<ServiceReportItem>["columns"]>([
  {
    title: "班组",
    dataIndex: "teamName",
  },
  {
    title: "收费员",
    dataIndex: "collector",
  },
  {
    title: "总次数",
    dataIndex: "totalTimes",
  },
  {
    title: "合格次数",
    dataIndex: "qualifiedTimes",
  },
  {
    title: "合格率",
    dataIndex: "qualifiedRate",
  },
  {
    title: "微笑合格率",
    dataIndex: "smileRate",
  },
  {
    title: "迎车合格率",
    dataIndex: "welcomeRate",
  },
  {
    title: "送车合格率",
    dataIndex: "deliveryRate",
  },
  {
    title: "文明用语合格率",
    dataIndex: "termRate",
  },
]);
function onSearchContent(model) {
  if (model.dateRange) {
    let start = model.dateRange[0];
    let end = model.dateRange[1];
    start = start.split(" ")[0] + " 00:00:00";
    end = end.split(" ")[0] + " 23:59:59";
    model.startTime = start;
    model.endTime = end;
    delete model.dateRange;
  } else if (model.dateRange === null) {
    model.startTime = null;
    model.endTime = null;
  }
  // console.log(model);
  reloadContentTable({ model });
}

const {
  // pagination: contentPagination,
  tableData: contentData,
  tableLoading: contentLoading,
  reloadTable: reloadContentTable,
} = useCURD<PartialServiceReportItem>({
  getDataUrl: Api.serviceReport,
});

const selectData = [
  {
    label: "收费时间",
    key: "dateRange",
    selectType: LabelSelectType.rangePicker,
    props: {
      // showTime: {
      //   format: "HH:mm:ss",
      // },
      showTime: false,
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  },
];
</script>
